
<template>
    <div class="banner">
        <el-carousel height="auto" indicator-position="outside" trigger="click" v-if="bannerList.length != 0" type="card"
            :interval="5000" pause-on-hover>
            <el-carousel-item v-for="item in bannerList" :key="item">
                <img :src="item.imageUrl" class="item-img" :title="item.typeTitle" />
            </el-carousel-item>
        </el-carousel>
        <div v-else>
            <el-skeleton :rows="9" />
        </div>
    </div>
</template>

<script setup>
import { getBanner } from '@/api/index/banner.js'
import { ref, onMounted } from 'vue'
const bannerList = ref([])
onMounted(async () => {
    const res = await getBanner()
    bannerList.value = res.banners
})

</script>

<style scoped lang="less">
.banner {
    width: 100%;

    .el-carousel {
        margin: 30px;

        .el-carousel__item {
            height: 300px;
            overflow: hidden;

            .item-img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        :deep(.is-active .el-carousel__button) {
            background: #409eff;
            width: 20px;
        }

        :deep(.el-carousel__button) {
            width: 8px;
            height: 8px;
            border-radius: 4px;
        }
    }
}
</style>